import { ElInput as Input,
  ElColorPicker as ColorPicker
} from 'element-plus'
import { usePrefix } from '@pg/prototypes'
import './styles.less'
import {defineComponent, ref, watch} from 'vue'

export const ColorInput = defineComponent({
  name: 'DnColorInput',
  props: ['value'],
  emits: ['change'],
  setup(props, { emit }) {
    const prefixRef = usePrefix('color-input')
    const color = ref(props.value)
    watch(() => props.value, (newVal) => {
      color.value = newVal
    })
    return () => {
      return (
        <div class={prefixRef.value}>
          <Input
            v-model:value={color.value}
            placeholder="Color"
            {...{
              'onUpdate:modelValue': (e) => {
                emit('change', e)
              }
            }}
            v-slots={{
              suffix: () => {
                return (
                  <ColorPicker
                    v-model:modelValue={color.value}
                    {...{
                      'onUpdate:modelValue': (e) => {
                        emit('change', e)
                      }
                    }}
                    onClick={(event) => {
                      event.stopPropagation?.()
                      return false
                    }}
                  />
                )
              }
            }}
          />
        </div>
      )
    }
  },
})
